import Vue from 'vue'
import VueRouter from 'vue-router' //导入自己的Router路由 
Vue.use(VueRouter)//vue.use声明一下
/****
 * 1 $route.params.id不是router
 * 2 子路由要写router-view  路径不要写/
 * 3 路由的时候要加s routes==!router(x错误)
 * 4 在写路由components的一定要写复数 加s
 * 5 url 传递参数时to="/params/111/222" 
 *   读取参数时  {{$route.params.aaa}}
 *   {{JSON.stringify($route,null,2)}} <br>
 * 6 在正则路由的情况下市绑定不到值的‘/par/:id(\\d+)’==params为空
 * 7 a链接上色==》 a.router-link-active 【append  exact 作用】
 * 8 append =url后面无限叠加  exact==绝对路径
 * 9 query path:'/users/woss' 一对
 * 10 name params 是一对的
 */
let zyi=`
1 $route.params.id不是router {{$route.name}} <br>
2 :to==>子路由要写router-view  children:[]路径不要写/ <br>
3 路由的时候要加s routes==!router(x错误)<br>
4 在写路由components的一定要写复数 加s <br>
5 url 传递参数时to="/params/111/222" 
  读取参数时  {{$route.params.aaa}}
  {{JSON.stringify($route,null,2)}} <br>
6 在正则路由的情况下市绑定不到值的‘/par/:id(\\d+)’==params为空
7 a链接上色==》 a.router-link-active
`

const users={template:`<div>
                        <h2>users</h2> 
                        <router-view ></router-view>
                     </div>`
          }

const user={template:`<div>
          {{$route.params.username}}
          {{$route.query.username}}
       </div>`
}

const home={template:`<div>home</div>`}


const router=new VueRouter({
    mode:'history',
    base:'__dirname',//当前的本地路径   
    routes:[
       {path:'/',name:'home',component:home},
       {path:'/users',component:users,
        children:[
            // {path:'/',name:'home-first',component:user},
            {path:'username',name:'user',component:user},
        ]
    
       }

    ]

})





new Vue({ //router-pam
    router,
    template: `<div id="r">
                <div>${zyi} </div>
                <h1>导航</h1>
                <p>{{$route.name}}</p>
                <ol>
                  <li><router-link to='/' >home</router-link></li>
                  <li><router-link to='/first'> first</router-link></li>
                    <ol>
                        <li>
                            <router-link :to="{path:'/users/wos',query:{aaa:'bbb'}}">
                                wos
                            </router-link>
                        </li>
                        <router-link  tag='li'   :to="{path:'/users/wos',query:{aaa:'bbb'}}">
                        wosyy
                         </router-link>

                         <li>
                         <router-link tag='li'  append   exact  :to="{path:'about'}">
                             wostt
                         </router-link>
                     </li>
                      
                    </ol>
                </ol>
                <router-view  ></router-view>
                
              </div>`
  }).$mount('#app')